<template>
    <div class="box">
        <div style="margin-bottom: 20px;"><el-switch :disabled="!tabStore.loginStatus" @change="changeSwitch"
                v-model="switchStore.assValue" size="large" active-text="全部" inactive-text="我的" />
        </div>
        <el-space wrap :size=15>
            <el-card shadow="never" v-for="(item, index) in ass_data" :key="index" style="width: 350px;">
                <template #header>
                    <div class="header">
                        <div class="title" > {{ item.title }} </div>
                        <div class="user">
                            <el-avatar :size=30 :src="item.avatar" />
                            <span>{{ item.username }}</span>
                        </div>

                        <el-button @click="toPage(item.ass_id, item._id, item.title)" plain>详情</el-button>
                    </div>
                </template>
                <div class="main">
                    <el-space wrap :size=5>
                        <el-image style="width: 70px; height: 70px" :src="item.ass_img.cpu_img" fit="cover" />
                        <el-image style="width: 70px; height: 70px" :src="item.ass_img.gpu_img" fit="cover" />
                        <el-image style="width: 70px; height: 70px" :src="item.ass_img.memory_img" fit="cover" />
                        <el-image style="width: 70px; height: 70px" :src="item.ass_img.mainboard_img" fit="cover" />
                        <el-image style="width: 70px; height: 70px" :src="item.ass_img.ssd_img" fit="cover" />
                        <el-image style="width: 70px; height: 70px" :src="item.ass_img.hdd_img" fit="cover" />
                    </el-space>
                </div>
                <template #footer>
                    <div class="footer">
                        <div class="score">
                            <span style="font-weight: 600;">综合评分: </span>
                            <span class="num">{{ item.score }}/60</span>
                        </div>
                        <div>
                            <span style="font-weight: 600;">合计: </span>
                            <span class="price">￥ {{ item.price }}</span>
                        </div>
                    </div>
                </template>
            </el-card>
        </el-space>
    </div>
</template>

<script setup lang="ts">
import { getConfig } from "@/server/home/http"
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useSwitchStore } from "@/store/useswitchStore";
import { useTabStore } from "@/store/useTabStore";


const switchStore = useSwitchStore()
const tabStore = useTabStore()
const changeSwitch = async (value: boolean) => {
    switchStore.setAssSwitch(value)
    if (value) {
        const res = await getConfig({});
        ass_data.value = res.data.result
    } else {
        const res = await getConfig({ useId: tabStore.userId });
        ass_data.value = res.data.result
    }

}

const router = useRouter()
const ass_data = ref([]);


onMounted(async () => {
    if (switchStore.assValue) {
        const res = await getConfig({});
        ass_data.value = res.data.result
    } else {
        const res = await getConfig({ useId: tabStore.userId });
        ass_data.value = res.data.result
    }

})

const toPage = (ass_id: string[], id: string, title: string) => {
    router.push({
        name: 'AssInfo',
        query: {
            title,
            id,
            ass_id
        },
    })
}




</script>

<style scoped lang="scss">
.box {
    padding: 20px;

    overflow-y: auto;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
        cursor: pointer;
        font-weight: bold;
        font-size: 18px;
    }

    .user {
        display: flex;
        align-items: center;

        span {
            font-weight: bold;
            margin-left: 10px;
        }
    }
}

.main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .el-image {
        margin-top: 10px;
        border: 1px solid rgb(194, 194, 194);
    }
}


.footer {
    display: flex;
    align-items: center;

    .score {
        margin-right: 30px;

        .num {
            font-weight: bold;
            color: rgb(70, 223, 70);
            font-size: 18px;
        }
    }

    .price {
        font-weight: bold;
        color: red;
        font-size: 18px;
    }
}
</style>